
<template>
    <div>
        <div class="flexFST" style="margin-top: 70px;">
            <div class="maxBox" style="height: 86vh; margin-top: 25px">
                <div :style="dplayerData.style" class="" id="dplayer"></div>
                <div class="giftBox flexSB">
                    <div v-for="(item, index) in  giftList" :key="index" class="flexDW giftListBox" 
                        @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave"
                        :class="{ deliverClass: selectGift == index }">

                        <div >
                            <img :src="item.img" alt="" srcset="" style="width: 35px;">
                        </div>

                        <div v-if="selectGift == index"  style="color: #b1b1b1;font-size: 12px;margin-top: -5px;margin-bottom: 5px;">
                            {{ item.price }}金币
                        </div>

                        <div v-if="selectGift != index"  style="color: #e4e0e0;font-size: 12px;">
                            {{ item.name }}
                        </div>

                        <div v-else class="deliverBtn" @click="deliverFun">
                                  赠送
                        </div>
                    </div>

                </div>
            </div>
            <!-- 网络表演评论 -->
            <div class="plunBox2 position-relative">
                <div class="mt-20 flex align-center">
                    <img :src="baga.thumbnail" alt class="with-50 height-50 radius-50" />
                    <div class="ml-10 color-fff font-13 pt-4 pb-4 flex jus-between flex-dre-column" style="height:50px">
                        <div>
                            <span>昵称：{{ baga.name }}</span>
                            <span class="ml-8">所属分类：{{ baga.action }}</span>
                        </div>
                        <div>
                            <span>城市：{{ baga.city }}</span>
                            <span class="ml-8">观众：{{ baga.people }}</span>
                            <span class="ml-8">粉丝：{{ baga.fans }}</span>
                            <span class="ml-8">主播等级：LV{{ baga.level }}</span>
                        </div>
                    </div>
                </div>
       
                <div class="scroll-window" ref="scroll">
                    <div :key="index" class="chatBox" v-for="(item, index) in chatListShow">
                        <div style="color: rgb(187,185,194);">
                            {{ item.name + ": " }}
                            <span style="color:#e4e0e0">
                                {{ item.content
                                }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="flex align-center position-absolute width-90b send-buttom">
                    <el-input placeholder="请输入内容" v-model="text"></el-input>
                    <el-button @click="sendInfo" class="ml-5" type="primary">发送</el-button>
                </div>
            </div>
        </div>
        <!-- 作品名 -->
        <div class="name">{{ name }}</div>
        <!-- 网络表演结束 -->
        <div class="livEnd" v-if="liveEndShow">
            <div class>网络表演已结束</div>
        </div>
    </div>
</template>

<script>
import DPlayer from 'dplayer'
import dplayer from '@/components/dplayer/dplayer'
import list from '@/api/request.json'
export default {
    props: ['worksId', 'isLive'],
    components: {
        dplayer,
    },
    data() {
        return {
            dplayerData: {
                style: 'width:100%;height:672px;position: absolute;bottom: 0;right: 0;',
            },
            info: { video: '视频链接', pic: '封面图链接' },
            page: 1,
            pageHF: 1,
            showReply: -1,
            name: '',
            type: -1,
            dplayerShow: true,
            commentList: [],
            sonCommentList: [],
            moreBtnShow: true,
            pageSize: 30,
            // isLive: isLive, //切换视频或网络表演
            chatList: list.commentList,
            chatListShow: [],
            liveEndShow: false,
            baga: {},
            text: '',
            selectGift: -1,
            giftList: [
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/0ea40b8376ef8157791b928a339ed9c9~tplv-obj.png",
                //     name: "星星",
                //     price: "1"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/eaddb438fa76ddbc8b8e57c39e182c20.png~tplv-obj.png",
                //     name: "棒棒糖",
                //     price: "10"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/42d4cd329e5c01be43c3432567847507.png~tplv-obj.png",
                //     name: "鲜花",
                //     price: "20"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/02a33705b04a56d3715b7b28718084f3.png~tplv-obj.png",
                //     name: "魔法棒",
                //     price: "30"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/cd4a89c249956a171309d9ad6f44b212.png~tplv-obj.png",
                //     name: "碰拳",
                //     price: "10"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/a24b3cc863742fd4bc3de0f53dac4487.png~tplv-obj.png",
                //     name: "大啤酒",
                //     price: "25"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/97f9d6b9c222b36ea8c8676f3bbc0617.png~tplv-obj.png",
                //     name: "书中情",
                //     price: "35"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/3d69142c45cc6be4e502e911c5767b23.png~tplv-obj.png",
                //     name: "玫瑰",
                //     price: "5"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/e7bfe45f97f3ff35449b4597475d08b2.png~tplv-obj.png",
                //     name: "连理枝",
                //     price: "40"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/4960c39f645d524beda5d50dc372510e.png~tplv-obj.png",
                //     name: "你最好看",
                //     price: "50"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/8e7cab6f75d581a974ac3ea91da69910.png~tplv-obj.png",
                //     name: "比翼鸟",
                //     price: "30"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/7197d992d6ffa2f50d6fba296052e4dc.png~tplv-obj.png",
                //     name: "气球",
                //     price: "100"
                // },
                // {
                //     img: "https://p3-webcast.douyinpic.com/img/webcast/79132f832e116418253d51ec67942aca.png~tplv-obj.png",
                //     name: "皇冠",
                //     price: "500"
                // },
                // {
                //     img: "https://p11-webcast.douyinpic.com/img/webcast/bd4ad62dfcc021fda39080166bcbd698.png~tplv-obj.png",
                //     name: "跑车",
                //     price: "1000"
                // },
                // {
                //     img: "https://p11-webcast.douyinpic.com/img/webcast/8d41e8692ec3a6513af229e535358793.png~tplv-obj.png",
                //     name: "飞机",
                //     price: "2000"
                // }
            ]
        }
    },
    mounted() {
        this.avatar = localStorage.getItem('avatar')
    },
    mounted() {
        this.dp = new DPlayer({
            container: document.getElementById('dplayer'),
            theme: '#b7daff', // 风格颜色，例如播放条，音量条的颜色
            loop: false, // 是否自动循环
            lang: 'zh-cn', // 语言，'en', 'zh-cn', 'zh-tw'
            hotkey: false, // 是否支持热键，调节音量，播放，暂停等
            preload: 'auto', // 自动预加载
            mutex: true, //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
            live: this.isLive,
            preventClickToggle: this.isLive,
            timer: null,
            video: {
                url: '', // 播放视频的路径
                pic: '', // 视频封面图片
            },
        })
        let that = this
        this.dp.on('ended', function () {
            //视频播放结束触发
            that.$set(that, 'liveEndShow', true)
            console.log('that.liveEndShow', that.liveEndShow)
            that.switchVideo('')
            //先拉在推
            let liveEnd = localStorage.getItem('liveEnd')
            let videoId = localStorage.getItem('videoId')
            if (!liveEnd) {
                localStorage.setItem('liveEnd', videoId)
            } else {
                localStorage.setItem('liveEnd', liveEnd + ',' + videoId)
            }
        })
        this.scroll()
    },
    beforeDestroy() {
        // 在组件销毁前清除定时器
        this.clearTimer()
    },
    methods: {
        deliverFun(){
            let result = localStorage.getItem("avatar")
            if(!result){
                this.$message.warning('请先登录')
            }else{
                this.$message.warning('余额不足')
            }

        },

        handleMouseEnter(index) {
            this.selectGift = index
        },

        handleMouseLeave(index) {
            this.selectGift = -1;
        },
        scroll() {
            this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight
        },
        sendInfo() {
            if (!localStorage.getItem('avatar')) {
                this.$message.error('请先登录')
                return false
            }
            if (this.text != '') {
                this.chatListShow.push({
                    name: '我',
                    content: this.text,
                })
                this.text = ''
                this.$nextTick(() => {
                    this.scroll()
                })
            }
        },
        empty() {
            this.name = ''
            this.dplayerShow = true
            this.switchVideo('')
            this.chatListShow = []
            console.log('清空子组件')
            this.clearTimer()
        },
        childMethod(media = '', data = '') {
            //判断视频是否被观看结束
            // let liveEnd = localStorage.getItem('liveEnd')
            // let videoId = localStorage.getItem('videoId')
            // let livEndList

            // if (liveEnd) {
            //     livEndList = liveEnd.split(',')
            // } else {
            //     livEndList = []
            // }

            // if (livEndList.includes(videoId)) {
            //     //已观看完毕
            //     this.liveEndShow = true
            // } else {
            //还未观看视频
            if (data != '') {
                this.baga = data
            }
            console.log(this.baga, 'data')
            let video = media ? media : localStorage.getItem('video')
            console.log(video)
            this.switchVideo(video)
            this.liveEndShow = false
            this.liveChat()
            this.dp.play()
            // }
        },
        sonCommentListFun(id, index) { },

        //网络表演的评论
        liveChat() {
            let that = this
            let random = Math.floor(Math.random() * that.chatList.length)
            let count = random
            this.timer = setInterval(() => {
                if (count > 0) {
                    count--
                    let temporary = that.chatList[Math.floor(Math.random() * that.chatList.length)]
                    if (!that.chatListShow.includes(temporary)) {
                        //数组不包含元素
                        that.chatListShow.push(temporary)
                    }
                    this.$nextTick(() => {
                        this.scroll()
                    })
                } else {
                    this.clearTimer()
                }
            }, 3000)
        },
        //清楚定时器
        clearTimer() {
            clearInterval(this.timer)
            this.timer = null
        },

        //加载更多
        more() {
            console.log()
            this.page++
            this.getComment()
        },
        // 切换视频源事件
        switchVideo(item) {
            this.dp.switchVideo({
                url: item,
                // pic: item.imgUrl,
            })
        },
        // 暂停事件
        pause() {
            this.dp.pause()
        },
    },
}
</script>

<style  scoped>
.plunBox2 {
    /* height: 800px; */
    /* width: 660px; */
    height: 86vh;
    width: 20%;
    background-color: rgba(47, 39, 78, 0.5);
    margin-top: 25px;
    padding: 0 20px;
    overflow: auto;
    margin-right: 60px;
    position: relative;
    /* 使伪元素相对于body定位 */
    z-index: 1;
    background-attachment: fixed;
    /* 设置背景图片固定 */
    /* 从左上到右下的对角渐变 */
    background: linear-gradient(to bottom right, rgba(47, 39, 78, 1), rgba(24, 22, 36, 1));
}

.plunBox2::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.scroll-window::-webkit-scrollbar {
    width: 0;
    height: 0;
}


.plunBox {
    height: 86vh;
    width: 30%;
    background-color: rgba(0, 0, 0, 0.5);
    margin-top: 25px;
    padding: 0 20px;
    overflow: auto;
    margin-right: 60px;
    position: relative;
    /* 使伪元素相对于body定位 */
    z-index: 1;
    background-attachment: fixed;
    /* 设置背景图片固定 */
    /* 从左上到右下的对角渐变 */
}

.plunBox::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.plunBox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://gd-hbimg.huaban.com/6307ee6f487cd986ca22d93935f7f6c61645a86c11244b-db68ki_fw658webp');
    filter: blur(300px);
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.title {
    text-align: center;
    padding: 15px 0;
    color: #fff;
    font-size: 18px;
    border-bottom: 1px solid #555;
}

.headBoxImg_img {
    border-radius: 3px;
    overflow: hidden;
}

.headBoxImg {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    margin-right: 10px;
}

.titleName {
    font-size: 26px;
    margin-bottom: 20px;
}

.dateText {
    font-size: 14px;
    color: #ffffff;
    margin-left: 50px;
}

.titleName {
    color: #fff;
    font-size: 14px;
}

.maxBox {
    background-color: #050d0f;
    height: 94.5vh;
    overflow: hidden;
    margin-top: 50px;
    width: 100%;
}

.name {
    position: absolute;
    color: #fff;
    top: 90px;
    left: 60px;
    font-size: 24px;
    z-index: 99;
}

.reply {
    color: #bdbdbd;
    font-size: 12px;
    margin-left: 50px;
    margin-top: 10px;
}

#dplayer {
    /* width: 93% !important; */
    width: 93% !important;
    height: 72vh !important;
    position: absolute;
    top: 50px;
    left: 50px;
}

.maxBox {   
    position: relative;
    z-index: 1;
    background-color: #272127;
    width: 80vw;
    padding-right: 5vw;
    
}

/* .maxBox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://gd-hbimg.huaban.com/0da9c10662e3e0f0331c8a72c969fd0b9e3ef85b1b2ed3-vnFhyq_fw658webp');
    filter: blur(200px);
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
} */

.chatBox {
    margin: 10px 0;
    font-size: 14px;
    color: rgb(187, 185, 194);
}

.livEnd {
    color: #fff;
    position: fixed;
    margin: auto;
    left: 0;
    top: 100px;
    right: 0;
    bottom: 0;
    z-index: 100000;
    width: 120px;
    height: 20px;
    margin-left: 700px;
}

/deep/ .dplayer-controller .dplayer-icons .dplayer-icon {
    display: none;
}

.send-buttom {
    bottom: 10px;
}

.scroll-window {
    transition: all 0.5s;
    height: 555px;
    overflow-y: scroll;
}

.giftBox {
    width: 93%;
    height: 7.5vh;
    background-color: rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 5px;
    right: 50px;
    padding: 0 15px;
    border-radius: 5px;
}

.deliverClass {
    /* background-color: white; */
    background-color: rgb(65, 66, 76);
    width: 100%;
    height: 112%;
    box-shadow: #1f1f1f 0 10px 10px;
    border-radius: 5px;
}

.giftListBox{
   width: 100%; 
   cursor: pointer;
}
.deliverBtn{
    background-color: rgb(255, 44, 85);
    text-align: center;
    color: white;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    width: 100%;
}
</style>